<template>
	<view>
		<view class="select">
			<imitate-select :dropList="dropList" @change='periodChange'></imitate-select>
		</view>
		<view class="my-tabs">
			<tab-indicator :tabs="tabs" :activeCode="activeCode" @tabChange='tabChange'></tab-indicator>
		</view>
		<view class="content-list">
			<view v-if="activeCode=='1'">
				<view class="academy-item" v-for="(item,index) in orgTree" :key='index' @click="itemClick(item)">
					<image class="check-img" :src="item.choice?imgs.check:imgs.nocheck"></image>{{item.name}}
				</view>
			</view>
			<view v-if="activeCode=='2'">
				<uni-collapse>
					<uni-collapse-item v-for="(oneItem,oneIndex) in orgTree" :key='oneIndex' :title="oneItem.name">
						<view class="academy-item" v-for="(twoItem,twoIndex) in oneItem.childs" :key='twoIndex' @click="itemClick(twoItem)">
							<image class="check-img" :src="twoItem.choice?imgs.check:imgs.nocheck"></image>{{twoItem.name}}
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view v-if="activeCode=='3'">
				<uni-collapse>
					<uni-collapse-item v-for="(oneItem,oneIndex) in orgTree" :key='oneIndex' :title="oneItem.name">
						<uni-collapse>
							<uni-collapse-item class="two-collapse" v-for="(twoItem,twoIndex) in oneItem.childs" :key="twoIndex" :title="twoItem.name">
								<view class="academy-item" v-for="(threeItem,threeIndex) in twoItem.childs" :key='threeIndex' @click="itemClick(threeItem)">
									<image class="check-img" :src="threeItem.choice?imgs.check:imgs.nocheck"></image>{{threeItem.name}}
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view v-if="activeCode=='4'">
				<uni-collapse>
					<uni-collapse-item v-for="(oneItem,oneIndex) in orgTree" :key='oneIndex' :title="oneItem.name">
						<uni-collapse>
							<uni-collapse-item class="two-collapse" v-for="(twoItem,twoIndex) in oneItem.childs" :key="twoIndex" :title="twoItem.name">
								<uni-collapse>
									<uni-collapse-item class="two-collapse" v-for="(threeItem,threeIndex) in twoItem.childs" :key="threeIndex" :title="threeItem.name">
										<view class="academy-item" v-for="(fourItem,fourIndex) in threeItem.childs" :key='fourIndex' @click="itemClick(fourItem)">
											<image class="check-img" :src="fourItem.choice?imgs.check:imgs.nocheck"></image>{{fourItem.name}}
										</view>
									</uni-collapse-item>
								</uni-collapse>
							</uni-collapse-item>
						</uni-collapse>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	import {isEmpty} from '@/utils/index';
	import imitateSelect from './fragments/imitateSelect';
	import tabIndicator from './fragments/tabIndicator';
	import uniCollapse from './fragments/uni-collapse';
	import uniCollapseItem from './fragments/uni-collapse-item';
	import msgService from '@/services/msg';
	const service = new msgService();
	export default{
		components:{
			imitateSelect,
			tabIndicator,
			uniCollapse,
			uniCollapseItem
		},
		data(){
			return{
				dropList:[],
				period:'',
				tabs:{},
				activeCode:'1',
				imgs:{
					check:'/static/study/check.png',
					nocheck:'/static/study/nocheck.png'
				},
				orgTree:[],
				selectedItems:[]
			}
		},
		onLoad() {
			this.getPeriod();
		},
		onUnload() {
			
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			};
			const payload = {
				orgLevel:this.period,
				orgLayer:this.activeCode,
				selectedItems:this.selectedItems
			}
			uni.$emit('msgObj',payload);
		},
		methods:{
			tabChange(code){
				this.activeCode = code;
				this.getOrgTree();
			},
			itemClick(item){
				item.choice = !item.choice;
				if(item.choice){
					this.selectedItems.push(item);
				}else{
					this.removeByValue(this.selectedItems,item);
				}
				console.log('selectedItems:',this.selectedItems);
			},
			periodChange(index){
				this.period = this.dropList[index].value;
			},
			clearData(){
				this.selectedItems = [];
			},
			getPeriod(){
				service.period().then(response=>{
					if(response.success){
						this.dropList = response.result;
						if(!isEmpty(this.dropList)){
							this.period = this.dropList[0].value;
							this.getTabs();
						}
					}else{
						uni.showToast({
							title:response.message,
							duration:2000,
							icon:'none'
						})
					}
				});
			},
			getTabs(){
				service.getOptionOrg({orgLevel:this.period}).then(response=>{
					if(response.success){
						this.tabs = response.result;
						if(!isEmpty(this.tabs)){
							this.activeCode = this.getFirstKey(this.tabs);
							this.getOrgTree();
						}
					}else{
						uni.showToast({
							title:response.message,
							duration:2000,
							icon:'none'
						})
					}
				});
			},
			//获取对象树
			getOrgTree(){
				service.getOrgTree({orgLevel:this.period,orgLayer:this.activeCode}).then(response=>{
					if(response.success){
						this.clearData();
						this.orgTree = response.result;
					}else{
						uni.showToast({
							title:response.message,
							duration:2000,
							icon:'none'
						})
					}
				});
			},
			//获取对象的第一个属性
			getFirstKey(data){
				 for (var key in data){
					return key;
				 }   
			},
			//删除数组中指定元素
			removeByValue(arr,val){
				for(let i = 0; i < arr.length; i++) {
					if(arr[i] == val) {
						 arr.splice(i, 1);
						 break;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select{
		width: 400upx;
		margin: 20upx auto;
	}
	.my-tabs{
		line-height: 70upx;
		box-shadow: 0 4upx 20upx 0 
				rgba(153, 153, 153, 0.15);
		border-bottom: solid 1px #f7f7f7;
	}
	.content-list{
		padding: 20upx 20upx;
	}
	.academy-item{
		display: flex;
		align-items: center;
		line-height: 80upx;
		font-size: 28upx;
		color: #333333;
		border-bottom: 2upx solid #F1F1F1;
	}
	.check-img{
		width: 28upx;
		height: 28upx;
		margin-right: 20upx;
	}
	.two-collapse{
		padding-left: 20upx;
	}
</style>
